<script lang="ts" setup>
import type { FormInstance, FormRules, Action } from 'element-plus'
import MessageBox from '@/utils/messageBox'
import iconImg from '@/assets/images/icons/app-remove-warn.png'

const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const form = reactive({
  name: 'Hello',
  name2: ''
})
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ]
})

const handleClose = (done: () => void) => {
  console.log('handleClose')
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')
      // const { data } = await DemoService.login(abc,123)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const handleOpenConfirm = (type: number) => {
  switch (type) {
    case 1:
      MessageBox.confirm({
        icon: 'version',
        title: '确认操作',
        contentTitle: '是否确定发布该版本更新',
        message: '数据发布后不可编辑，请谨慎操作！'
      })
        .then(() => {
          ElMessage.info('点击[确定]')
        })
        .catch(() => {})
      break
    case 2:
      MessageBox.confirm({
        icon: 'info',
        title: '帮助提示',
        message: `
          <ol>
            <li>由于部分管理功能以及数据权限依赖于行政区划，因
      此建议在正式使用前进行相关配置</li>
            <li>行政区划支持多级</li>
            <li>由于行政区划配置关联内容较多，因此删除时需谨慎</li>
          </ol>
        `
      })
        .then(() => {
          ElMessage.info('点击[确定]')
        })
        .catch(() => {})
      break
    case 3:
      MessageBox.confirm({
        contentTitle: '退出确认',
        message: `返回上级不会保存本次编辑的内容，是否继续?`
      })
        .then(() => {
          ElMessage.info('点击[确定]')
        })
        .catch(() => {})
      break
    case 4:
      MessageBox.confirm({
        icon: 'error',
        contentTitle: '操作失败',
        message: `操作失败，返回列表页面`
      })
        .then(() => {
          ElMessage.info('点击[确定]')
        })
        .catch(() => {})
      break
    case 5:
      MessageBox.confirm({
        icon: 'success',
        contentTitle: '操作成功',
        message: `操作成功，返回列表页面`
      })
        .then(() => {
          ElMessage.info('点击[确定]')
        })
        .catch(() => {})
      break
    case 6:
      MessageBox.confirm({
        icon: iconImg,
        contentTitle: '确认移除该应用吗？',
        message: `移除应用后用户将无法看到该应用入口，并在其下次登录后生效。`
      })
        .then(() => {
          ElMessage.info('点击[确定]')
        })
        .catch(() => {})
      break
    default:
      console.warn('未知弹窗类型')
  }
}
</script>

<template>
  <el-button @click="dialogVisible = true">Dialog 弹窗测试</el-button>
  <el-button @click="handleOpenConfirm(1)">确认弹窗-版本发布</el-button>
  <el-button @click="handleOpenConfirm(2)">确认弹窗-帮助提示</el-button>
  <el-button @click="handleOpenConfirm(3)">确认弹窗-操作确认</el-button>
  <el-button @click="handleOpenConfirm(4)">确认弹窗-失败提示</el-button>
  <el-button @click="handleOpenConfirm(5)">确认弹窗-成功提示</el-button>
  <el-button @click="handleOpenConfirm(6)">确认弹窗-自定义图标</el-button>

  <el-dialog
    v-model="dialogVisible"
    title="确认操作"
    width="560px"
    :before-close="handleClose"
    class="c-dialog"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="108" class="p-20">
      <el-form-item label="一二三四五六" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="一二三四五六七八九" prop="name2">
        <el-input v-model="form.name2" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
